<template>
  <div class="app-container">
    <div class="filter-container">

      <el-card class="box-card">
        <div class="text item">
          链地址: <el-tag>{{ gethAddr }}</el-tag>
        </div>
        <div class="text item">
          挖矿状态: <el-tag v-if="mining!=null"> {{ mining?'开启':'关闭' }}</el-tag> <label style="color: #2ac06d" />
          <el-button v-if="mining!=null && mining" type="danger" round @click="minerStop">停止挖矿</el-button>  <el-button v-if="mining!=null && !mining" type="success" round @click="minerStart">开始挖矿</el-button>
        </div>
        <div class="text item">
          挖矿收益账户: <el-tag> {{ coinbase }}</el-tag>
        </div>
        <div class="text item">
          区块高度: <el-tag>{{ blockNumber }}</el-tag>
        </div>
        <div class="text item">
          数据存储目录: <el-tag>{{ datadir }}</el-tag>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="text item">
          节点信息: <el-tag>{{ ethNodeInfo.enode }}</el-tag>
        </div>
        <div class="text item">
          id: <el-tag>{{ ethNodeInfo.id }}</el-tag>
        </div>
        <div class="text item">
          ip: <el-tag>{{ ethNodeInfo.ip }}</el-tag>
        </div>
        <div class="text item">
          监听地址: <el-tag>{{ ethNodeInfo.listenAddr }}</el-tag>
        </div>
        <div class="text item">
          名称: <el-tag>{{ ethNodeInfo.name }}</el-tag>
        </div>
        <div class="text item">
          端口发现: <el-tag>{{ ethNodeInfo.ports.discovery }}</el-tag>
        </div>
        <div class="text item">
          端口发现: <el-tag>{{ ethNodeInfo.ports.listener }}</el-tag>
        </div>

      </el-card>
      <el-card v-if="ethPeers" class="box-card">
        <div class="text item">
          id: <el-tag>{{ ethPeers.id }}</el-tag>
        </div>
        <div class="text item">
          名称: <el-tag>{{ ethPeers.name }}</el-tag>
        </div>
      </el-card>

    </div>
  </div>
</template>
<script>
import { gethInfo, minerStart, minerStop } from '@/api/block/ethGeth'
export default {
  name: 'GethInfo',
  data() {
    return {
      gethAddr: null,
      mining: null,
      coinbase: null,
      blockNumber: null,
      datadir: null,
      ethNodeInfo: null,
      ethPeers: null
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      gethInfo().then(response => {
        this.gethAddr = response.data.gethAddr
        this.mining = response.data.mining
        this.coinbase = response.data.coinbase
        this.blockNumber = response.data.blockNumber
        this.datadir = response.data.datadir
        this.ethNodeInfo = response.data.ethNodeInfo
        this.ethPeers = response.data.ethPeers
        console.log(response)
      })
    },
    minerStart() { // 开启挖矿
      minerStart().then(response => {
        console.log(response)
        this.initData()
      })
    },
    minerStop() { // 停止挖矿
      minerStop().then(response => {
        console.log(response)
        this.initData()
      })
    }
  }
}</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
